<template>
	<div class="news">
		<div class="card">
			<ul id="list">
<!-- 				<li class="item">
					<div class="tag">{{ news.pubDateStr[0] }}</div>
					<div class="content" title="0" @click="getNews($event)">
						<div class="title">{{ news.title[0] }}</div>
						<p>{{ news.summary[0] }}</p>
					</div>
					<a>></a>
				</li> -->
			</ul>
		</div>
	</div>
</template>

<script>

	export default{
		props:{
			newsData:{
				type:Object,
				default:function(){
					return {};
				}
			}
		},
		data(){
			return{
				news:{
					pubDateStr:[],
					title:[],
					sourceUrl:[],
					summary:[]
				}
			}
		},
		mounted(){
			setTimeout(()=>{
				this.news=JSON.parse(JSON.stringify(this.newsData));
				//console.log(this.news);
				var list=document.getElementById("list");
				for(let i=0;i<this.news.pubDateStr.length;i++){
					list.innerHTML+=
					"<li class='item'><div class='tag'>"+this.news.pubDateStr[i]+"</div><div class='content' title="+i+"><div class='title'>"+this.news.title[i]+"</div><p>"+this.news.summary[i]+"</p></div><a>></a></li>"
				}
				var content=document.querySelectorAll(".content");
				var arr=this.news.sourceUrl;
				content.forEach(function(element,index){
					element.addEventListener("click",function(){
							console.log(arr)
							window.location.href=arr[index-1]
						},false)
				})
			},800)
		},
	}
</script>

<style>
	.news{
		padding:1.2rem 1.6rem;
		font-size:1.2rem;
		background-color:#fff;
	}
	.card{
		border-radius:0.4rem;
		border:0.05rem solid #ebebeb;
		background-color:#fff;
		overflow:hidden;
		box-shadow:0 0.2rem 0.6rem rgb(0,0,0,0.1)
	}
	.item{
		display:flex;
		justify-content: space-between;
		padding: 1.5rem 1.6rem;
		border-bottom: 2px solid #f1f1f1;
	}
	.tag{
		width: 4rem;
		display: flex;
		flex: none;
		align-items: center;
		height: 1.5rem;
		margin-top: 0.2rem;
		padding: 0 0.2rem;
		border-radius: 0.4rem;
		background-color: #f74c31;
		color: #fff;
		font-weight: 700;
		font-size: 0.8rem;
		justify-content: center;
	}
	.content{
		display: flex;
		flex: auto;
		flex-direction: column;
		justify-content: center;
		margin: 0 0.7rem;
	}
	.title{
		color: #333;
		font-weight: 700;
		font-size: 1rem;
		line-height: 1.2rem;
	}
	.content p{
		margin-top: 0.3rem;
		color: #999;
		font-weight: 400;
		font-size: 1rem;
		line-height: 1.7rem;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	a{
		color: #969696;
		font-family: ‘Microsoft YaHei’,Tahoma,Arial,sans-serif;
	}
</style>